<template>
	<view class="">
		<view class="flex_between address_bg" :style="'height:'+ height + ';width:' + width" @click="windowSelect = '0'">
			<view class="flex_start">
				{{formData.provinceText || defaultText}} {{formData.cityText || ''}} {{formData.districtText || ''}}
			</view>
			<view class="icon_class" :style="{transform:windowSelect === '0'?'rotate(-90deg)':'rotate(90deg)'}">
				<uni-icons :type="icon_type" :color="icon_color" :size="icon_size"></uni-icons>
			</view>
		</view>
		
		<view class="address_window" :style="'bottom:' + windowSelect">
			<view class="close_window column_center" @click="windowSelect = '-100%'">
			</view>
			<view class="address_text flex_start">
				<view class="address_select" style="align-items: flex-end;" @click="addressSelect = 1;alignItems = 1">
					<view class="">
						{{formData.provinceText || '请选择省'}}
					</view>
					<view class="border_b" :style="{width:addressSelect==1?'100%':'0'}"></view>
				</view>
				<view class="address_select margin_left10" :style="{'align-items': alignItems==3?'flex-end':'flex-start'}" @click="addressSelect = 2">
					<view class="">
						{{formData.cityText || ''}}
						<text v-if="formData.cityText == '' && formData.provinceText != ''">
							请选择市
						</text>
					</view>
					<view class="border_b" :style="{width:addressSelect==2?'100%':'0'}"></view>
				</view>
				<view class="address_select margin_left10" style="align-items: flex-start;" @click="addressSelect = 3;alignItems = 3">
					<view class="">
						{{formData.districtText || ''}}
						<text v-if="formData.cityText != '' && formData.districtText == ''">
							请选择区
						</text>
					</view>
					<view class="border_b" :style="{width:addressSelect==3?'100%':'0'}"></view>
				</view>
			</view>
			<view class="address_list">
				<scroll-view scroll-y="true" style="height: 100%;">
					<view v-for="(item,index) in provinceList" v-if="addressSelect == 1">
						<view class="address_data" :style="{color: item.code == formData.province?'#ff6600':''}" @click="provinceClick(item,1)">
							{{item.fullname}}
						</view>
					</view>
					<view v-for="(item,index) in cityList" v-if="addressSelect == 2">
						<view class="address_data" :style="{color: item.code == formData.city?'#ff6600':''}" @click="provinceClick(item,2)">
							{{item.fullname}}
						</view>
					</view>
					<view v-for="(item,index) in districtList" v-if="addressSelect == 3">
						<view class="address_data" :style="{color: item.code == formData.district?'#ff6600':''}" @click="provinceClick(item,3)">
							{{item.fullname}}
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		
		<view class="mask" v-if="windowSelect === '0'" @click="windowSelect = '-100%'" @touchmove.stop.prevent="moveStop"></view>
	</view>
</template>

<script>
	export default {
		name:"yht_selectAddress",
		data() {
			return {
				addressSelect:1,
				alignItems:1,
				windowSelect:'-100%',
				formData:{
					province:'',//省
					provinceText:'',
					city:'',//市
					cityText:'',
					district:'',//区
					districtText:'',//区
				},
				defaultText:'请选择'
			};
		},
		props:{
			provinceList:{
				type:Array,
				default:[]
			},
			cityList:{
				type:Array,
				default:[]
			},
			districtList:{
				type:Array,
				default:[]
			},
			height:{
				type:String,
				default:'80rpx'
			},
			width:{
				type:String,
				default:' 100%'
			},
			icon_type:{
				type:String,
				default:'forward'
			},
			icon_color:{
				type:String,
				default:''
			},
			icon_size:{
				type:String,
				default:''
			}
		},
		methods:{
			moveStop(){},
			// 省
			provinceClick(item,type){
				console.log(type);
				if (type == 1) {
					this.addressSelect = type+1
					this.formData.provinceText = item.fullname
					this.formData.province = item.code
					this.formData.cityText = ''
					this.formData.city = ''
					this.$emit('addressSelect',{code:item.code,type:type + 1})
				}else if(type ==2){
					this.addressSelect = type+1
					this.formData.cityText = item.fullname
					this.formData.city = item.code
					this.alignItems = 3
					this.formData.districtText = ''
					this.formData.district = ''
					this.$emit('addressSelect',{code:item.code,type:type + 1})
				}else if(type ==3){
					this.formData.districtText = item.fullname
					this.formData.district = item.code
					this.windowSelect = '-100%'
					this.$emit('addressSelect',{code:item.code,type:type + 1})
				}
			}
		}
	}
</script>

<style lang="scss">
	.address_bg{
		border: 2rpx solid #cccccc;
		border-radius: 10rpx;
		font-size: 28rpx;
		padding: 0 10rpx;
	}
	.icon_class{
		transition: all 0.3s ease;
	}
	.address_window{
		width: 100%;
		height: 70%;
		background-color: #FFFFFF;
		border-radius: 15px 15px 0 0;
		position: fixed;
		bottom: 0;
		left: 0;
		z-index: 100;
		padding: 20rpx 30rpx 30rpx 30rpx;
		transition: all 0.3s ease;
	}
	.close_window{
		width: 100%;
		.arrowdown_icon{
			height: 40rpx;
			width: 60rpx;
		}
	}
	.address_list{
		width: 100%;
		height: calc(100% - 80rpx);
	}
	.address_text{
		height: 80rpx;
		width: 100%;
	}
	.address_select{
		height: 60rpx;
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: space-between;
	}
	.border_b{
		width: 0;
		height: 2rpx;
		background-color: #FF6600;
		transition: all 0.3s ease;
	}
	.address_data{
		height: 80rpx;
		line-height: 80rpx;
		width: 100%;
		border-bottom: 2rpx solid #d9d9d9;
	}
</style>
